<template>
  <div class="big-screen">
    <div class="big-top">
      <div class="header">
        <ul class="header-left">
          <li>视频监控</li>
          <li class="active">钻试日常</li>
        </ul>
        <img class="logo" src="../../assets/images/big_logo.png" alt="">
        <ul class="header-right">
          <li>安环环保</li>
          <li>车辆管理</li>
        </ul>
        <div class="time">
          <span>{{time}}</span>
          <div>安全生产{{day}}天</div>
        </div>
        <div class="logout">
          <el-button size="mini" type="primary" @click="handleLogOut">退出</el-button>
        </div>
      </div>
    </div>
    <div class="big-bottom">
      <div class="big-b-left">
        <left1></left1>
        <left2></left2>
        <left3></left3>
      </div>
      <div class="big-b-middle">
        <middle></middle>
      </div>
      <div class="big-b-right">
        <right1></right1>
        <right2></right2>
        <right3></right3>
      </div>
    </div>
  </div>
</template>

<script>
import left1 from './left-1'
import left2 from './left-2'
import left3 from './left-3'
import right1 from './right-1'
import right2 from './right-2'
import right3 from './right-3'
import middle from "./middle";
export default {
  name: "index",
  components: {
    left1,
    left2,
    left3,
    right1,
    right2,
    right3,
    middle
  },
  data() {
    return {
      time: '',
      day: 230
    }
  },
  mounted() {
    this.getTime();
  },
  methods: {
    getTime() {
      setInterval(()=>{
        let date =  new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hours = date.getHours()< 10 ? '0' + date.getHours() : date.getHours();
        let minutes = date.getMinutes()< 10 ? '0' + date.getMinutes() : date.getMinutes();
        let seconds = date.getSeconds()< 10 ? '0' + date.getSeconds() : date.getSeconds();
        this.time = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t";
      }, 1000)
    },
    handleLogOut() {
      // this.$router.push('/index')
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
        })
      }).catch(() => {});
    }
  }
}
</script>

<style scoped lang="scss">
.big-screen {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/images/big_bg.png");
  background-size: 100% 100%;
  .big-top {
    width: 100%;
    height: 120px;
    .header {
      width: 100%;
      height: 120px;
      background: url("../../assets/images/big_header.png");
      background-size: 100% 100%;
      //text-align: center;
      position: relative;
      .logo {
        width: 622px;
        height: 44px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -90%);
      }
      .header-left {
        display: flex;
        position: absolute;
        top: 19%;
        left: 7%;
        color: #0FABF6;
        li {
          width: 165px;
          height: 44px;
          line-height: 44px;
          text-align: center;
          background: url("../../assets/images/big_btn1.png");
          background-size: 100% 100%;
          font-size: 16px;
          cursor: pointer;
        }
        .active {
          background: url("../../assets/images/big_btn_active.png");
          background-size: 100% 100%;
          color: #fff;
        }
      }
      .header-right {
        display: flex;
        position: absolute;
        top: 19%;
        right: 8.5%;
        color: #0FABF6;
        li {
          width: 165px;
          height: 44px;
          line-height: 44px;
          text-align: center;
          background: url("../../assets/images/big_btn2.png");
          background-size: 100% 100%;
          font-size: 16px;
          cursor: pointer;
        }
      }
      .time {
        color: #9DBBED;
        font-size: 14px;
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        span {
          margin-right: 20px;
        }
      }
      .logout {
        position: absolute;
        right: 2%;
        top: 30%;
      }
    }
  }
  .big-bottom {
    width: 100%;
    height: calc(100% - 120px);
    padding: 0 25px;
    display: flex;
    justify-content: space-around;
    .big-b-left {
      width: 28%;
      height: 100%;
      margin-top: -1.8%;
    }
    .big-b-middle {
      width: calc(45% - 40px);
      height: calc(100% - 20px);
      margin: 0 20px;
    }
    .big-b-right {
      width: 28%;
      height: 100%;
      margin-top: -1.8%;
    }
  }
}
</style>
